<template>
	<div>
		<u-sticky :offset-top="0"   :customNavHeight="0">
			<u-navbar @leftClick="backPage" right-icon="man-add" @rightClick="addFriend" right-text="添加好友" placeholder title="消息">
			</u-navbar>
			<div class="search-box">
				<u-search :showAction="false" placeholder="请输入关键字搜索" v-model="keyword"
					@change="searchMessage"></u-search>
			</div>
		</u-sticky>
		<div class="tui-conversation" @click="handleClickConv" @touchstart="handleTouchStart"
			@touchend="handleTouchEnd">
			<ConversationNetwork />
			<ConversationList class="tui-conversation-list" ref="conversationListDomRef" :searchList="searchList"
				@handleSwitchConversation="handleSwitchConversation" @getPassingRef="getPassingRef" />
		</div>
		<Tabbar :tabbarIndex="0" />
	</div>
</template>
<script lang="ts" setup>
	import {checkUserInfo,IMLoginOut } from "../../utils/checkLogin";
	import Tabbar from "../common/tabbar/tabbar.vue";
	import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
	import { TUIGlobal } from "@tencentcloud/universal-api";
	import { ref } from "../../adapter-vue";
	import ConversationList from "./conversation-list/index.vue";
	import ConversationNetwork from "./conversation-network/index.vue";
	import { onHide, onShow,onUnload } from "@dcloudio/uni-app"; // 该方法只能用在父组件内，子组件内不生效
	
	//搜索字段
	let keyword = ref('')
	let searchList = ref<any>([])
	const emits = defineEmits(["handleSwitchConversation", "searchChange"]);

	const headerRef = ref<HTMLElement | undefined>();
	const conversationListDomRef = ref<HTMLElement | undefined>();
	const touchX = ref<number>(0);
	const touchY = ref<number>(0);
	//导航条返回事件
	const backPage = () => {
		// TUIGlobal?.navigateBack({delta: 1});

		TUIGlobal?.switchTab({
			url: '/pages/index/index'
		})
		// TUIGlobal?.reLaunch({
		// 	url: '/pages/tabbar/index'
		// })
		IMLoginOut()
		
	};
	//添加好友页
	const addFriend=()=>{
		TUIGlobal?.navigateTo({
			url: '/pages/TUIKit/components/TUIConversation/add-friend/index'
		})
	}
	//搜索消息
	const searchMessage = () => {
		if (keyword.value === '') {
			searchList.value = []
		} else {
			let list = conversationListDomRef?.value?.allList
			let arr = []
			list.map(item => {
				if (item.getShowName().indexOf(keyword.value) != -1)
					arr.push(item)
			})
			searchList.value = arr
		}
		TUIStore.update(StoreName.CONV, 'searchList', { list: searchList.value, keyword: keyword.value })
	}
	//打开会话窗口
	const handleSwitchConversation = (conversationID : string) => {
		TUIGlobal?.navigateTo({
			url: "/pages/TUIKit/components/TUIChat/index?id="+conversationID,
		});
		emits("handleSwitchConversation", conversationID);
	};

	const closeChildren = () => {
		conversationListDomRef?.value?.closeChildren();
	};
    //滑动组件的点击事件
	const handleClickConv = () => {
		closeChildren();
	};

	onHide(closeChildren);
	onShow(() => {
		TUIStore.watch(StoreName.CUSTOM, {
			IMuserInfo: (data : any) => {
				if (data) {
					console.log(data,"当前用户信息")
					//避免出现搜索之后点击了下面的tab  keyword置空了 列表没有同步信息
					searchMessage()
					checkUserInfo()
				}
		
			}
		})
		
	})
	onUnload(()=> {
		
	})
	//列表开始滑动
	const handleTouchStart = (e : any) => {
		touchX.value = e.changedTouches[0].clientX;
		touchY.value = e.changedTouches[0].clientY;
	};
	// 列表下滑
	const handleTouchEnd = (e : any) => {
		let x = e.changedTouches[0].clientX;
		let y = e.changedTouches[0].clientY;
		let turn = "";
		if (x - touchX.value > 50 && Math.abs(y - touchY.value) < 50) {
			//右滑
			turn = "right";
		} else if (x - touchX.value < -50 && Math.abs(y - touchY.value) < 50) {
			//左滑
			turn = "left";
		}
		if (y - touchY.value > 50 && Math.abs(x - touchX.value) < 50) {
			//下滑
			turn = "down";
		} else if (y - touchY.value < -50 && Math.abs(x - touchX.value) < 50) {
			//上滑
			turn = "up";
		}
		//根据方向进行操作
		if (turn === "down" || turn === "up") {
			closeChildren();
		}
	};
    //会话窗口
	const getPassingRef = (ref) => {
		ref.value = conversationListDomRef.value;
	}
</script>

<style lang="scss" scoped src="./style/index.scss"></style>
<style lang="scss" scoped>
	/*每个页面公共css */
	uni-page-body,
	html,
	body,
	page {
		width: 100% !important;
		height: 100% !important;
		background: #FFF;
	}

	.search-box {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background: #FFF;
	}
	:v-deep .uicon-man-add{
		font-size: 48rpx !important;
	}
</style>